<template>
  <div>
    <el-scrollbar height="554px" always>
      <div class="head">云音乐特色榜</div>
      <div class="content">
        <div v-for="(item, index) in list" :key="index" class="item" >
          <router-link :to="{ path: `/details/${item.id}` }" class="topList-item">
            <img :src="item.coverImgUrl" :alt="item.name" />
            <span class="name">{{ item.name }}</span>
          </router-link>
        </div>
      </div>
      <div class="head">热门歌单</div>
      <div class="content">
        <div v-for="(item, index) in hotList" :key="index" class="item">
          <router-link :to="{ path: `/details/${item.id}` }" class="topList-item">
          <img :src="item.picUrl" :alt="item.name" />
          <span class="top-name">{{ item.name }}</span>
          </router-link>
        </div>
      </div>
    </el-scrollbar>
  </div>
</template>
<script setup>
import { getPersonalized, getToplistDetail } from "@/api"
import { onMounted, ref } from "vue"

// 热门歌单
const hotList = ref([])
// 云音乐特色榜
const list = ref([])
onMounted(async () => {
  const hotRespose = await getPersonalized()
  const listResponse = await getToplistDetail()
  hotList.value = hotRespose.data.result
  list.value = listResponse.data.list
  list.value = list.value.filter((item) => item.ToplistType)
})
</script>
<style scoped lang="less">
.topList-item:hover{
  span{
    color: #fff;
  }
}
::v-deep .el-scrollbar__bar.is-vertical {
  background-color: #514f4ff7;
}
::v-deep .el-scrollbar__thumb {
  background-color: #fff;
}
.content {
  display: flex;
  flex-wrap: wrap;
}
.item {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 14%;
  padding: 0 37px 20px 37px;
  img {
    width: 130px;
    height: 130px;
  }
}
.head {
  width: 100%;
  height: 34px;
  line-height: 34px;
  padding: 20px 0;
  font-size: 18px;
  color: #fff;
}
.name {
  display: flex;
  justify-content: center;
  height: 30px;
  line-height: 30px;
  width: 130px;
  font-size: 14px;
  color: hsla(0, 0%, 100%, 0.6);
}
.top-name {
  display: inline-block;
  height: 30px;
  line-height: 30px;
  width: 130px;
  font-size: 14px;
  color: hsla(0, 0%, 100%, 0.6);
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}
</style>
